import { Button, Descriptions, Modal } from 'antd';
import React, { useEffect, useState } from 'react';
import { convertISODateTimeToYYYYMMDDHHMMSS, openNotification_util, useCallbackState } from '../util/util';
import Sortable_new from './sortable_new.js';
var storage = window.localStorage;
const Description = (props) => {
  const [isModalOpen, setIsModalOpen] = useState();
  const [formData, setFormData] = useState([])
  const [columnarr, setcolumnarr] = useCallbackState([])
  useEffect(() => {
    if (storage[props.storageName]) {
      var result = JSON.parse(storage[props.storageName])
      setcolumnarr(result)
      handleColumnChange(result)
    }
    else {
      setcolumnarr(props.columnarr)
      handleColumnChange(props.columnarr)
    }
  }, [props.columnarr])
  const handleOk = () => {
    setIsModalOpen(false)
  };
  const handleCancel = () => {
    setIsModalOpen(false)
  };
  const showModal = () => {
    if (props.selectedRows.length == 1) {
      setIsModalOpen(true)
      handleColumnChange(columnarr)
    }
    else openNotification_util("请选择一条数据");
  };
  const handleColumnChange = (columnarr) => {
    let newformdata = []
    let newColumnarr = columnarr.filter((item) => item.show)
    for (let index = 0; index < newColumnarr.length; index++) {
      let newItem = {}
      if (newColumnarr[index].type == "Date") {
        newItem['title'] = newColumnarr[index].title
        newItem['key'] = newColumnarr[index].key
        newItem['value'] = props.selectedRows[0]?.[newColumnarr[index].key] == null || props.selectedRows[0]?.[newColumnarr[index].key] == "" ? "" :
          convertISODateTimeToYYYYMMDDHHMMSS(props.selectedRows[0]?.[newColumnarr[index].key])
      }
      else {
        newItem['title'] = newColumnarr[index].title
        newItem['key'] = newColumnarr[index].key
        newItem['value'] = props.selectedRows[0]?.[newColumnarr[index].key]
      }
      newformdata.push(newItem)
    }
    if (props.selectedRows.length == 1) {
      let result = JSON.parse(props.selectedRows[0].wtgzjzd)
      var resultdata = newformdata.map((item) => {
        for (let i = 0; i < result.length; i++) {
          if (item.key == result[i]) {
            item.color = '#f5222d'
          }
        }
        return item
      })
      setFormData(resultdata)
    }
    else{
      setFormData(newformdata)
    }
  }
  return (
    <>
      <Button style={props.style ? props.style : {}} onClick={showModal}>{props.title}</Button>
      <Modal title={props.title} open={isModalOpen} footer={""} onOk={handleOk} onCancel={handleCancel} width="96vw" style={{ marginTop: "-5vh" }}>
        <Sortable_new tableColnum={columnarr}
          handleTableColomn={(data) => { setcolumnarr(data); handleColumnChange(data) }}
          storageName={props.storageName}
          style={{ position: 'absolute', right: '3vw', top: '0.5rem', fontSize: "1.5rem" }}
        />
        <Descriptions style={{ width: "94vw", margin: "0 auto" }} bordered column={4}>
          {formData.map((item, index) => {
            return <Descriptions.Item label={item.title} key={index} labelStyle={{ fontWeight: '600', width: '8vw',fontSize:"0.6rem" }}
              contentStyle={{ width: "13vw", background: item.color ? item.color : '',color: item.color ? 'white' : 'black'}}
              span={item.value?.length > 25 ? 2 : 1}>{item.value}</Descriptions.Item>
          })}
        </Descriptions>
      </Modal >
    </>
  )
};
export default Description;